<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path;
    %>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>图片分享系统</title>
    <!-- 基本配置文件会先放在前面 -->
    <link rel="stylesheet" type="text/css" href="../resources/package/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../resources/package/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../resources/general/css/base.css">
    <link rel="stylesheet" type="text/css" href="../resources/general/css/model.css">
    <link rel="stylesheet" type="text/css" href="../resources/general/css/comment.css">
    <link rel="stylesheet" type="text/css" href="../resources/general/css/person.css">
    <script type="text/javascript" src="../resources/general/js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="../resources/general/js/lib/jquery.form.js"></script>
    <script src="../resources/package/layer/layer.js"></script>
</head>
<body>
<div class="header-wrapper">
    <div class="header">
        <div class="nav-left">
            <i class="glyphicon glyphicon-align-justify"></i>
        </div>
        <div class="nav-middle">
            <div class="logoInfo">
                <a class="logo">图片分享</a>
            </div>
            <div class="search">
                <input class="form-control searchInput" title="" placeholder="搜索">
                <i class="glyphicon glyphicon-search"></i>
                <div class="searchFrame">
                    <div class="searchFrame-node"><a><span class="input-value"></span><span
                            class="searchFrame-node-span">按照内容</span></a></div>
                    <div class="searchFrame-node"><a><span class="input-value"></span><span
                            class="searchFrame-node-span">按照用户</span></a></div>
                </div>
            </div>
        </div>
        <div class="nav-right">
            <!--fontawesome字体图标-->
            <i class="fa fa-bell-o"></i>
            <div class="message">
                <div class="triangle"></div>
                <div class="triangle-shadow"></div>
                <div class="message-wrapper">
                    <div class="message-header">
                        <div class="title">消息通知</div>
                    </div>
                    <div class="message-content">
                        <div class="message-content-wrapperLeft">
                            <div class="message-menu message-menu-selected" id="0MessageMenu">通知</div>
                            <div class="message-menu" id="1MessageMenu">@我</div>
                            <div class="message-menu" id="2MessageMenu">评论</div>
                            <div class="message-menu" id="3MessageMenu">标记为已读</div>
                        </div>
                        <div class="message-content-wrapperRight">
                        </div>
                    </div>
                </div>
            </div>

            <img class="user-getInfo" src="${currentUser.portraitThumbPath}">
            <!--<a>账户</a>-->
            <div class="user-nav">
                <div class="triangle"></div>
                <div class="triangle-shadow"></div>
                <div class="user-nav-wrapper">
                    <div class="user-info">
                        <div class="user-img">
                            <img src="${currentUser.portraitThumbPath}">
                        </div>
                        <div class="user-name" id="${currentUser.id}username">${currentUser.username}</div>
                    </div>
                    <div class="user-item">
                        <a class="" href="<%=basePath%>/share/personInfo">用户资料</a>
                    </div>
                    <div class="user-item">
                        <a class="" href="<%=basePath%>/user/resetPassword">修改密码</a>
                    </div>
                    <div class="user-item">
                        <a class="" href="<%=basePath%>/logout">退出</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="content-wrapper">
    <div class="left-model">
        <div class="left-model-header">
            <a class="model-title-left">图片分享</a>
            <a class="model-title-right"><i class="fa fa-angle-right"></i></a>
        </div>
        <div class="left-model-middle">
            <a class="left-model-item">
                <i class="icon glyphicon glyphicon-home"></i>
                <span class="content">首页</span>
            </a>
            <a class="left-model-item">
                <i class="icon fa fa-user-circle-o"></i>
                <span class="content">我的</span>
            </a>
            <a class="left-model-item">
                <i class="icon glyphicon glyphicon-stats"></i>
                <span class="content">排行</span>
            </a>
            <a class="left-model-split"></a>
            <a class="left-model-item">
                <i class="icon glyphicon glyphicon-certificate"></i>
                <span class="content">设置</span>
            </a>
            <a class="left-model-item">
                <i class="icon glyphicon glyphicon-question-sign"></i>
                <span class="content">帮助</span>
            </a>
        </div>
        <div class="left-model-bottom">
            <div class="info">图片分享程序</div>
            <div class="info"><a>隐私政策 </a><a> 服务条款</a></div>
            <div class="info"><a>©2017 易拓工作室</a></div>
        </div>
    </div>
    <div class="left">
        <div class="left-header">
            <a class="left-item" href="<%=basePath%>/share/index">
                <i class="icon glyphicon glyphicon-home"></i>
                <span class="content">首页</span>
            </a>
            <a class="left-item" href="<%=basePath%>/share/personInfo">
                <i class="icon  fa fa-user-circle-o"></i>
                <span class="content">我的</span>
            </a>
            <a class="left-item" href="<%=basePath%>/share/rank">
                <i class="icon glyphicon glyphicon-sort"></i>
                <span class="content">排行</span>
            </a>
            <div class="split"></div>
            <a class="left-item">
                <i class="icon glyphicon glyphicon-certificate"></i>
                <span class="content">设置</span>
            </a>
            <a class="left-item">
                <i class="icon glyphicon glyphicon-question-sign"></i>
                <span class="content">帮助</span>
            </a>
        </div>
        <div class="left-bottom">
            <div class="info">图片分享程序</div>
            <div class="info"><a>隐私政策 </a><a> 服务条款</a></div>
            <div class="info"><a>©2017 易拓工作室</a></div>
        </div>
    </div>
    <div class="right">
        <div class="right-inner">
            <div class="person">
                <div class="person-header">
                    <div class="person-background">
                        <img src="http://photos-share01.oss-cn-shenzhen.aliyuncs.com/photos01/1505309326866.jpg">
                    </div>
                    <div class="person-shortInfo">
                        <div class="logo">
                            <img src="${currentUser.portraitThumbPath}">
                        </div>
                        <div class="shortInfo">
                            <div class="name">${currentUser.username}</div>
                            <div class="mail">${currentUser.mail}</div>
                        </div>
                    </div>
                    <div class="person-edit">
                        <a class="edit" href="<%=basePath%>/share/edit">个人信息编辑</a>
                    </div>
                    <div class="person-blank"></div>
                </div>
                <div class="person-content">

                </div>
                <div class="person-bottom"></div>
            </div>
            <!--个人分享动态-->
            <div class="dynamic">
                <div class="dynamic-header">
                    <div class="dynamic-share-name">个人动态</div>
                    <div class="dynamic-share">
                        <div class="one-cont cont">
                        </div>
                        <div class="two-cont cont">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="model-normal">
    <div class="model-normal-header">
        <a class="model-logo">
            <img src="${currentUser.portraitThumbPath}">
        </a>
        <a class="model-name">sq-zhou</a>
        <div class="model-close"><i class="fa fa-close"></i></div>
    </div>
    <div class="model-normal-middle">
        <textarea placeholder="你的感受～" class="textarea-share"></textarea>
    </div>
    <div class="model-normal-bottom">
        <div class="model-map">
            <span>当前操作:</span><span> 转发</span><span><a class="model-normal-href" href="">原文链接</a></span>
        </div>
        <div class="model-right-send">
            <span class="cancel-open">取消</span>
            <span class="shareAdd-sure-send">确认</span>
        </div>
    </div>
</div>
<div class="model-normal-wrapper"></div>
<!--基础js配置文件-->
<script src="../resources/general/js/app/base.js"></script>
<script src="../resources/general/js/app/fade.js"></script>
<script src="../resources/general/js/app/tool.js"></script>
<script src="../resources/general/js/app/loginStatus.js"></script>

<!--动态效果页面-->
<script src="../resources/general/js/app/model.js"></script>
<script src="../resources/general/js/app/search.js"></script>
<script src="../resources/general/js/app/comment.js"></script>
<script src="../resources/general/js/app/userFrame.js"></script>
<script src="../resources/general/js/app/shareNode.js"></script>
<script src="../resources/general/js/app/message.js"></script>
<script src="../resources/general/js/app/personInfo.js"></script>
</body>
</html>
